<template>
	<view class="login-container" style="position: relative;">
		<view class="login-block" style="display: flex;">
			<view class="login-block-left">
				<text class="login-title admin-font-yahe">{{sConf.appName}}</text>
			</view>
			<view class="login-block-right">
				<view class="login-block-right-item"
					style="display: flex;flex-direction: column;align-items: center;gap: 20px;">
					<image src="/static/logo.png" mode="scaleToFill" style="width: 128px;height: 128px;"></image>
					<view class="login-block-item">
						<uni-easyinput v-model="loginForm.username" type="number" prefixIcon="phone" placeholder="用户手机号"
							trim="all"></uni-easyinput>
					</view>
					<view class="login-block-item">
						<uni-easyinput v-model="loginForm.password" type="password" prefixIcon="locked"
							placeholder="登录密码" :passwordIcon="true" trim="all"></uni-easyinput>
					</view>
					<view class="login-block-item" style="display: flex;align-items: center;gap: 5px;">
						<uni-easyinput v-model="loginForm.captcha" type="text" prefixIcon="image" placeholder="图形验证码"
							trim="all" maxlength="4"></uni-easyinput>
						<image :src="sConf.host + captchaUrl" @click="refreshCaptcha" class="captcha-img"
							mode="aspectFit" />
					</view>
					<view class="login-block-item">
						<button type="primary" :disabled="loginForm.password === null" :loading="loading"
							@click="eventLoginForKey">登录</button>
					</view>
					<view class="login-block-item"
						style="padding-top: 10px;display: flex;justify-content: space-between;">
						<view class="">
							<text><text style="font-weight: bold;">appVer:</text><text
									style="color: #aaa;">{{sConf.appVer}}</text></text>
						</view>
						<view class="">
							<text>
								<text style="font-weight: bold;">os:</text>
								<text style="color: #aaa;">{{sConf.osName}}</text>
							</text>
							<text style="padding-left: 5px;color: #aaa;">{{sConf.osVer}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="" style="display: flex;gap: 10px;position: absolute;bottom: 20px;">
			<text style="color: #fff;">Copyright © 2025</text>
			<a href="https://beian.miit.gov.cn/#/Integrated/index"
				style="color: #fff;text-decoration: none;">渝ICP备2025049779号-1</a>
		</view>
	</view>
</template>

<script>
	import md5 from 'js-md5';
	import psMethod from '@/common/psMethod.js';
	export default {
		data() {
			return {
				title: '用户登录',
				sConf: getApp().globalData,
				loading: false,
				captchaUrl: 'https://api.yuejunxi.com/api/hascode/1234',
				loginForm: {
					recode: null,
					captcha: null,
					username: null,
					password: null
				}
			}
		},
		onLoad() {
			console.log('...onLoad...');
			let auth = psMethod.syncHasLoginToken()
			if (auth) {
				this.sConf.auth = auth
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		},
		onShow() {
			this.refreshCaptcha()

			let login = psMethod.syncHasLoginToken()
			if (login) {
				// this.sConf.token = login.token
				// this.sConf.auth = login.staff
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		},
		methods: {
			syncSetLoginToken(data) {
				let that = this
				data['last'] = Date.now();
				console.log('保存用户登录信息->', data);
				uni.setStorage({
					key: that.sConf.env + '_login',
					data: data
				});
			},
			/**
			 * 密码登录
			 */
			eventLoginForKey() {
				console.log('eventLoginForKey');
				if (!this.loginForm.username || !this.loginForm.password) {
					uni.showToast({
						title: '请输入用户名或密码'
					})
					return
				}
				this.loading = true;
				let data = {
					username: this.loginForm.username,
					password: md5(this.loginForm.password),
					captcha: this.loginForm.captcha,
					recode: this.loginForm.recode
				}
				psMethod.syncAnonymousRequest('/admin/login/', 'POST', data).then(res => {
					console.log('登录成功', res);
					this.sConf.auth = res.resmsg;
					psMethod.syncSetLoginToken(res.resmsg)
					uni.navigateTo({
						url: '/pages/index/index'
					})
				}).catch(err => {
					console.log('登录失败', err);

					uni.showToast({
						title: '登录失败',
						icon: 'error'
					});

				}).finally(() => {
					this.loading = false;
				})

			},
			// 刷新验证码
			refreshCaptcha() {
				if (this.out > 0) {
					return
				}
				let recode = this.generateNumCode()
				this.captchaUrl = '/api/hascode/' + recode
				this.loginForm.recode = recode
				this.loginForm.captcha = null
			},
			// 生成请求码
			generateNumCode() {
				return Math.floor(1000 + Math.random() * 9000); // 生成1000-9999之间的随机数
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		padding: 0;
		margin: 0;
		border: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-image: url('/static/login-bg.jpg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.login-block {
		width: 1024px;
		height: 480px;
		border-radius: 20px;

		.login-block-left {
			width: 60%;
			background-image: url('/static/sw.jpg');
			background-size: 100% 100%;
			background-position: center;
			background-repeat: no-repeat;
			border-radius: 20px 0 0 20px;
			position: relative;

			.login-title {
				color: #f1f1f1;
				font-size: 64px;
				font-weight: bold;
				position: relative;
				left: 60px;
				top: 80px;
			}

		}

		.login-block-right {
			width: 40%;
			background-color: #f1f1f1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 0 20px 20px 0;
			padding: 0 20px;

			.login-block-right-item {
				width: 100%;
				padding: 0 20px;

				.login-block-item {
					width: 100%;
					padding: 0 20px;
				}
			}
		}
	}

	.captcha-img {
		margin-left: 10px;
		width: 100px;
		height: 35px;
	}
</style>